<template>
  <div class="gl_mt_15">
    <van-popup v-model="showRemark" round position="bottom" :style="{ height: '20%', padding: '10%'}">
      {{ approveRemark }}
    </van-popup>
    <div v-if="approveStatus.code">
      <p v-if="approveStatus.code != 'ApproveFailed'" class="status">
        <span>状态审核：</span>
        <span v-if="approveStatus.code == 'ApproveSuccess'" class="gl_color_success">{{ approveStatus.name }}</span>
        <span v-else class="gl_color_warning">{{ approveStatus.name }}</span>
      </p>
      <div v-else class="gl_mx_15">
        <van-row type="flex" justify="space-between">
          <van-col class="status_fail" span="12" align="center">
            <span>状态审核：</span>
            <span class="gl_color_grey">{{ approveStatus.name }}</span>
          </van-col>
          <van-col class="status_fail" align="center" span="7" @click="changeShowRemark">
            <span>查看驳回原因</span>
          </van-col>
          <van-col class="status_fail" align="center" span="4" @click="jumpToGameEntry">
            <van-icon size="16" name="edit" />
          </van-col>
        </van-row>
      </div>
    </div>
    <template v-for="(item, index ) in data">
      <van-cell :key="index">
        <div class="box">
          <van-row type="flex" justify="space-between" @click="detail(item)">
            <van-col span="5" align="center">
              <div class="gl_pt_5">
                <van-image v-if="item.sourceRegister.imagePath" round width="50" height="50" fit="contain" :src="getStaticFileUrl(item.sourceRegister.imagePath)" />
                <img v-else src="@/assets/images/person_default.png" alt="" style="width:50px; height:50px">
              </div>
            </van-col>
            <van-col span="19">
              <p>
                <span class="box_title">{{ item.sourceRegister.name }}</span>
                <span class="gl_pl_15">
                  <template v-for="ktem in dict.gender">
                    {{ ktem.code == item.sourceRegister.genderCode ? ktem.value : '' }}
                  </template>
                </span>
              </p>
              <van-row type="flex" justify="space-between">
                <van-col span="20">{{ item.sourceRegister.idCardNumber }}</van-col>
                <van-col v-if="!item.isShow" class="arrow" align="right" span="4"><van-icon name="arrow" /></van-col>
                <van-col v-else class="arrow" align="right" span="4"><van-icon name="arrow-down" /></van-col>
              </van-row>
            </van-col>
          </van-row>
          <div v-if="item.isShow" style="width:100%">
            <van-divider dashed :style="{ display: 'flex', color: '#979797', borderColor: '#979797' }" />
            <p v-if="item.delegation">参赛机构：{{ item.delegation.name }}</p>
            <div>
              <p class="title">项目：</p>
              <div class="title" style="width: 80%">
                <p v-for="(etem, endex) in item.entrys" :key="etem.id">
                  <span>{{ etem.event.longName }}</span>
                  <span v-if="etem.weightClass">{{ ' (' + etem.weightClass.name + ') ' }}</span>
                  <span v-if="etem.teamNo">{{ etem.teamNo }}组</span>
                  <span v-if="endex !== item.entrys.length - 1">；</span>
                </p>
              </div>
            </div>
            <p><van-button icon="gem-o" style="width:100%; border-radius: 6px;" type="info" size="small" @click="dataUpload(item.id)">资料上传</van-button></p>
          </div>
        </div>
      </van-cell>
    </template>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    approveStatus: {
      type: Object,
      default() {
        return {};
      }
    },
    approveRemark: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShow: false,
      showRemark: false,
      gameId: ''
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.gameId = this.$route.params.id;
    this.getDict();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    detail(val) {
      val.isShow = !val.isShow;
      this.data.map(item => {
        if (item.id !== val.id) {
          item.isShow = false;
          return item;
        }
      });
    },
    changeShowRemark() {
      this.showRemark = true;
    },
    dataUpload(registerId) {
      var id = this.$route.query.id;
      this.$router.push({
        path: `/myCenter${this.gameId && '/' + this.gameId || ''}/entry/upload`,
        query: {
          id: id,
          registerId: registerId
        }
      });
    },
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    jumpToGameEntry () {
      this.$emit('onJumpToGameEntry');
    }
  }
};
</script>

<style lang="scss" scoped>
.status {
  text-align: center;
  border: 1px solid #dbdbdb;
  padding: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #333333;
  margin: 0 15px;
  border-radius: 10px;
}
.status_fail {
  text-align: center;
  border: 1px solid #dbdbdb;
  padding: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #333333;
  border-radius: 10px;
  line-height: 20px;
}
.status,.status_fail span {
	vertical-align: middle;
	font-size: 12px;
}
.box {
	border: 1px solid #dbdbdb;
  color: #666666;
	border-radius: 10px;
	padding: 10px;
  line-height: 24px;
  font-size: 12px;
}
.box_title {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
}
.arrow {
	font-size: 16px;
  color: #666666;
  line-height: 24px;
}
.van-cell::after {
	border: none;
}
.title {
	display: inline-block;
	vertical-align: top;
}
</style>
